{% extends "base.html" %}

{% block content %}
    <div class="card">
        <h2>{{ table_info.name }} 数据</h2>
        <p>{{ table_name }}</p>
        
        <div style="margin-bottom: 20px;">
            <a href="{{ url_for('database') }}" class="btn btn-info">
                <i class="fas fa-arrow-left"></i> 返回
            </a>
        </div>
        
        <form class="search-form" method="get" action="{{ url_for('table_view', table_name=table_name) }}">
            <select name="search_field" id="searchFieldSelect">
                <option value="">全字段搜索</option>
                {% for field in table_info.fields %}
                    <option value="{{ field }}" {% if search_field == field %}selected{% endif %}>{{ field }}</option>
                {% endfor %}
            </select>
            <input type="text" name="search_value" placeholder="搜索内容（多个值用空格分隔）" value="{{ search_value or '' }}">
            <button type="submit" class="btn btn-info">搜索</button>
            <a href="{{ url_for('table_view', table_name=table_name) }}" class="btn btn-info">重置搜索</a>
        </form>
        
        <!-- 批量操作表单 -->
        <div class="card" style="margin-top: 20px; background-color: #f8f9fa;">
            <h3>批量修改</h3>
            <form id="batchForm" method="post" action="{{ url_for('batch_edit', table_name=table_name) }}">
                <input type="hidden" name="search_field" value="{{ search_field or '' }}">
                <input type="hidden" name="search_value" value="{{ search_value or '' }}">
        
                <div class="form-group">
                    <label for="batch_field">选择字段</label>
                    <select id="batch_field" name="batch_field" required>
                        <option value="">请选择要修改的字段</option>
                        {% for field in table_info.fields %}
                            {% if field != table_info.primary_key %}
                                <option value="{{ field }}" 
                                        {% if search_field and search_field != '' and search_field == field %}selected{% endif %}>
                                    {{ field }}
                                </option>
                            {% endif %}
                        {% endfor %}
                    </select>
                    <small id="batchFieldHelp" class="form-text text-muted">
                        {% if search_field and search_field != '' %}
                            已自动选择搜索字段: <strong>{{ search_field }}</strong>
                        {% else %}
                            请选择要批量修改的字段
                        {% endif %}
                    </small>
                </div>
        
        <!-- 其他表单字段保持不变 -->
        <div class="form-group">
            <label for="operation">操作类型</label>
            <select id="operation" name="operation" required>
                <option value="set">替换为</option>
                <option value="add">增加</option>
                <option value="subtract">减少</option>
            </select>
        </div>
        
        <div class="form-group">
            <label for="value">值</label>
            <input type="text" id="value" name="value" required>
        </div>
        
        <div class="form-group">
            <label>
                <input type="checkbox" id="apply_to_all" name="apply_to_all">
                应用到整张表（忽略搜索条件）
            </label>
        </div>
        
        <button type="submit" class="btn btn-success">执行批量操作</button>
        <span id="batchResult" style="margin-left: 15px;"></span>
    </form>
</div>
        
        <div style="overflow-x: auto; margin-top: 20px;">
            <table>
                <thead>
                    <tr>
                        {% for field in table_info.fields %}
                            <th>{{ field }}{% if field == primary_key %} 🔑{% endif %}</th>
                        {% endfor %}
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for row in data.data %}
                        <tr>
                            {% for field in table_info.fields %}
                                <td>
                                    {% if field in row %}
                                        {{ row[field] }}
                                    {% else %}
                                        NULL
                                    {% endif %}
                                </td>
                            {% endfor %}
                            <td>
                                {% if table_name == "impart_cards" %}
                                    {# impart_cards表使用复合主键 #}
                                    {% set composite_key = row['user_id'] ~ '_' ~ row['card_name'] %}
                                    <a href="{{ url_for('row_edit', table_name=table_name, row_id=composite_key) }}" class="btn btn-primary">编辑</a>
                                {% elif table_name == "back" %}
                                    {# 背包表使用复合主键 #}
                                    {% set composite_key = row['user_id'] ~ '_' ~ row['goods_id'] %}
                                    <a href="{{ url_for('row_edit', table_name=table_name, row_id=composite_key) }}" class="btn btn-primary">编辑</a>
                                {% else %}
                                    {# 其他表使用普通主键 #}
                                    <a href="{{ url_for('row_edit', table_name=table_name, row_id=row[primary_key]) }}" class="btn btn-primary">编辑</a>
                                {% endif %}
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        
        <!-- 分页导航 -->
        <div class="pagination">
            {% set current_page = data.page %}
            {% set total_pages = data.total_pages %}
            
            {# 第一页 #}
            {% if current_page > 1 %}
                <a href="{{ url_for('table_view', table_name=table_name, page=1, search_field=search_field, search_value=search_value) }}">1</a>
            {% endif %}
            
            {# 前省略号 #}
            {% if current_page > 4 %}
                <span>...</span>
            {% endif %}
            
            {# 当前页的前3页 #}
            {% for p in range([1, current_page-3]|max, current_page) %}
                {% if p > 1 %}
                    <a href="{{ url_for('table_view', table_name=table_name, page=p, search_field=search_field, search_value=search_value) }}">{{ p }}</a>
                {% endif %}
            {% endfor %}
            
            {# 当前页 #}
            <a href="{{ url_for('table_view', table_name=table_name, page=current_page, search_field=search_field, search_value=search_value) }}" class="active">{{ current_page }}</a>
            
            {# 当前页的后3页 #}
            {% for p in range(current_page+1, [current_page+4, total_pages+1]|min) %}
                <a href="{{ url_for('table_view', table_name=table_name, page=p, search_field=search_field, search_value=search_value) }}">{{ p }}</a>
            {% endfor %}
            
            {# 后省略号 #}
            {% if total_pages > current_page + 3 %}
                <span>...</span>
            {% endif %}
            
            {# 最后一页 #}
            {% if total_pages > 1 and current_page < total_pages %}
                <a href="{{ url_for('table_view', table_name=table_name, page=total_pages, search_field=search_field, search_value=search_value) }}">{{ total_pages }}</a>
            {% endif %}
        </div>
        
        <div style="margin-top: 10px;">
            显示 {{ (data.page - 1) * data.per_page + 1 }} - {{ [data.page * data.per_page, data.total]|min }} 条，共 {{ data.total }} 条
        </div>
    </div>

    <script>
        // 批量操作表单提交
        document.getElementById('batchForm')?.addEventListener('submit', function(e) {
            e.preventDefault();
            
            const applyToAll = document.getElementById('apply_to_all').checked;
            const batchField = document.getElementById('batch_field').value;
            const operation = document.getElementById('operation').value;
            const value = document.getElementById('value').value;
            
            let message = `确定要执行批量操作吗？\n字段: ${batchField}\n操作: ${operation}\n值: ${value}`;
            
            if (applyToAll) {
                message += "\n\n⚠️ 警告：此操作将应用到整张表的所有记录！";
            }
            
            if (!confirm(message)) {
                return;
            }
            
            const formData = new FormData(this);
            const resultSpan = document.getElementById('batchResult');
            resultSpan.innerHTML = '<span style="color: blue;">处理中...</span>';
            
            fetch(this.action, {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    resultSpan.innerHTML = `<span style="color: green;">${data.message}</span>`;
                    // 刷新页面以显示更新后的数据
                    setTimeout(() => location.reload(), 1000);
                } else {
                    resultSpan.innerHTML = `<span style="color: red;">错误: ${data.error}</span>`;
                }
            })
            .catch(error => {
                resultSpan.innerHTML = `<span style="color: red;">请求失败: ${error}</span>`;
            });
        });
        
        // 当选择应用到整张表时，禁用搜索相关字段
        document.getElementById('apply_to_all')?.addEventListener('change', function() {
            const searchField = document.querySelector('input[name="search_field"]');
            const searchValue = document.querySelector('input[name="search_value"]');
            
            if (searchField && searchValue) {
                searchField.disabled = this.checked;
                searchValue.disabled = this.checked;
            }
        });

// 页面加载时初始化批量修改字段
document.addEventListener('DOMContentLoaded', function() {
    const searchField = "{{ search_field or '' }}";
    const batchFieldSelect = document.getElementById('batch_field');
    const batchFieldHelp = document.getElementById('batchFieldHelp');
    
    // 如果有搜索字段且不是全字段搜索，自动选择对应的批量修改字段
    if (searchField && searchField !== '') {
        const option = batchFieldSelect.querySelector(`option[value="${searchField}"]`);
        if (option) {
            option.selected = true;
            batchFieldHelp.innerHTML = `已自动选择搜索字段: <strong>${searchField}</strong>`;
        }
    }
    
    // 当选择"应用到整张表"时，检查是否需要选择批量修改字段
    document.getElementById('apply_to_all')?.addEventListener('change', function() {
        if (this.checked && batchFieldSelect.value === '') {
            alert('请先选择要批量修改的字段');
            this.checked = false;
        }
    });
    
    // 表单提交前的验证
    document.getElementById('batchForm')?.addEventListener('submit', function(e) {
        const applyToAll = document.getElementById('apply_to_all').checked;
        const batchField = document.getElementById('batch_field').value;
        const searchField = "{{ search_field or '' }}";
        
        // 如果是全字段搜索且没有选择批量修改字段，阻止提交
        if ((!searchField || searchField === '') && batchField === '') {
            e.preventDefault();
            alert('全字段搜索时，请选择要批量修改的字段');
            return false;
        }
        
        // 如果应用到整张表但未选择批量修改字段，阻止提交
        if (applyToAll && batchField === '') {
            e.preventDefault();
            alert('应用到整张表时，请选择要批量修改的字段');
            return false;
        }
    });
});

// 搜索字段选择变化时更新帮助文本
document.getElementById('searchFieldSelect')?.addEventListener('change', function() {
    const batchFieldSelect = document.getElementById('batch_field');
    const batchFieldHelp = document.getElementById('batchFieldHelp');
    
    if (this.value && this.value !== '') {
        // 自动选择对应的批量修改字段
        const option = batchFieldSelect.querySelector(`option[value="${this.value}"]`);
        if (option) {
            option.selected = true;
            batchFieldHelp.innerHTML = `已自动选择搜索字段: <strong>${this.value}</strong>`;
        }
    } else {
        // 全字段搜索时重置帮助文本
        batchFieldHelp.innerHTML = '请选择要批量修改的字段';
    }
});
    </script>
{% endblock %}
